<script lang="ts" setup>
import { Badge, TabPane, Tabs } from 'ant-design-vue';

interface ITabs {
  value: string;
  title: string;
  count: number;
  type: 'danger' | 'primary' | 'success' | 'warning';
}

const props = defineProps({
  list: { type: Object, default: [] },
  disabled: { type: Boolean, default: false },
});

const emit = defineEmits(['clickTab']);

// 类型颜色映射数组
const typeColorMap = [
  { type: 'primary', color: '#2db7f5' },
  { type: 'danger', color: '#f50' },
  { type: 'success', color: '#87d068' },
  { type: 'warning', color: 'gold' },
  { type: 'default', color: '#999' },
];

const activeKey: any = defineModel('activeKey');
function getTabColor(item: ITabs) {
  return activeKey.value === item.value ? 'color:#2db7f5' : '';
}
function select() {
  emit('clickTab')
}
</script>
<template>
  <div>
    <Tabs v-model:active-key="activeKey" type="card" :tab-bar-gutter="5" @change="select()" size="small">
      <template v-for="item in list" :key="item.value">
        <TabPane :disabled="disabled || item.disabled" >
          <template #tab>
            <div :class="getTabColor(item)">
              <Badge :color="typeColorMap.find((map) => map.type === item.type)?.color || ''" :count="item.count || item.num" :overflow-count="100000000000000">
                <div style="margin-right: 25px">{{ item.title || item.label }}</div>
              </Badge>
            </div>
          </template>
        </TabPane>
      </template>
    </Tabs>
  </div>
</template>
<style lang="scss" scoped>
:deep(.ant-tabs-nav) {
  margin: 0px;
}
</style>
